const n = `<!--
 * @Author: Quarter
 * @Date: 2023-11-22 20:39:29
 * @LastEditors: Quarter
 * @LastEditTime: 2024-12-12 17:05:38
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/dialog/default-dialog.vue
 * @Description: 默认对话框组件
-->
<template>
  <div class="default-dialog">
    <s-flex gap="1.2rem">
      <s-button theme="primary" @click="dialogVisible = true">打开对话框</s-button>
      <s-button theme="primary" @click="handleOpenConfirmDialog">函数式确认框</s-button>
    </s-flex>
    <s-dialog :visible.sync="dialogVisible" width="32%" height="32%" center>
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 4rem;
        "
      >
        <s-button theme="primary" @click="dialogVisible = false">关闭对话框</s-button>
        <s-button theme="primary" @click="newDialogVisible = true">打开新的对话框</s-button>
      </div>
    </s-dialog>
    <s-dialog
      :visible.sync="newDialogVisible"
      width="30rem"
      height="20rem"
      header
      title="新的对话框"
      footer
      body="这是一个新的对话框的内容"
      :confirm-button="{
        theme: 'success',
        text: '关闭',
      }"
      without-close-button
      @confirm="newDialogVisible = false"
    ></s-dialog>
  </div>
</template>

<script lang="ts">
import { DialogCommand, MessageCommand } from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DialogDemo extends Vue {
  /**
   * @description: 对话框可见性
   * @private
   * @type {boolean}
   */
  dialogVisible = false;

  /**
   * @description: 第二个对话框可见性
   * @private
   * @type {boolean}
   */
  newDialogVisible = false;

  /**
   * @description: 处理打开确认对话框
   * @private
   * @returns
   */
  handleOpenConfirmDialog(): void {
    const index = DialogCommand.confirm({
      title: "函数式触发",
      content: "这是一个函数式触发的对话框",
      onClose: () => {
        MessageCommand.info("关闭了对话框");
      },
      onConfirm: () => {
        DialogCommand.close(index);
        MessageCommand.success("点击了对话框确认");
      },
    });
  }
}
<\/script>
`; export { n as default };
